<template>
    <div class="app-container2 guizepeizhi_warp">
      <div class="left_box">
        <el-input
          v-model="searchValue"
          class="seach_input js_common_input2"
          placeholder="搜索"
          suffix-icon="el-icon-search"
          clearable
          size="small"
          style="margin-bottom: 20px"
        />
        <div class="left_tree">
          <el-scrollbar class="el-scrollbar-bai">
            <el-tree
              class="js_common_tree"
              :data="treeDate"
              :props="defaultProps"
              :expand-on-click-node="false"
              node-key="label"
              ref="tree"
              :filter-node-method="filterNode"
              current-node-key="板卡1"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </el-scrollbar>
        </div>
      </div>
      <div class="right_box">
        <div class="right_main">
          <div class="top_btns_wrap">
            <div class="btns_list">
              <el-button class="js_common_btn">复杂测点构建</el-button>
              <el-button class="js_common_btn">配置模版生成</el-button>
            </div>
            <div class="btns_list">
              <el-button class="js_common_btn">诊断规则保存</el-button>
              <el-button class="js_common_btn">诊断规则导出</el-button>
            </div>
          </div>
          <div class="tabbar_wrap">
            <div class="tabbar_list">
              <div
                :class="['tabbar_item', item.id === actTabbarItem && 'act']"
                v-for="item in tabbarList"
                :key="item.id"
                @click="onChangeTabbarItemFn(item.id)"
              >
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="right_content_wrap">
            <div class="content_table">
              <components :is="actTabbarItem" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import tab1 from "./components/tab1.vue";
  import tab2 from "./components/tab2.vue";
  import tab3 from "./components/tab3.vue";
  import tab4 from "./components/tab4.vue";
  export default {
    data() {
      return {
        searchValue: "",
        tabbarList: [
          {
            id: "tab1",
            name: "正常状态规则",
          },
          {
            id: "tab2",
            name: "异常状态规则",
          },
          {
            id: "tab3",
            name: "故障状态规则",
          },
          {
            id: "tab4",
            name: "故障状态规则",
          },
        ],
        actTabbarItem: "tab1",
        //左侧树数据
        treeDate: [
        {
            label: "DOS系统",
            children: [
              {
                label: "操作员站1",
                children: [],
              },
              {
                label: "操作员站2",
                children: [],
              },
              {
                label: "历史服务器",
                children: [],
              },
              {
                label: "计算服务器",
                children: [],
              },
              {
                label: "通信服务器",
                children: [],
              },
              {
                label: "控制站1",
                children: [],
              },
              {
                label: "控制站2",
                children: [
                  {
                    id: 1,
                    label: "板卡1",
                  },
                  {
                    label: "板卡2",
                  },
                ],
              },
              {
                label: "网关",
                children: [],
              },
              {
                label: "交换机",
                children: [],
              },
              {
                label: "打印机",
                children: [],
              },
            ],
          },
        ],
        defaultProps: {
          children: "children",
          label: "label",
        },
      };
    },
    components: {
      tab1,
      tab2,
      tab3,
      tab4,
    },
    watch: {
      // 根据搜索节点
      searchValue(val) {
        this.$refs.tree.filter(val);
      },
    },
    methods: {
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      //tree点击节点
      handleNodeClick(cell, node) {
        console.log(cell, node);
      },
      onChangeTabbarItemFn(cptName) {
        this.actTabbarItem = cptName;
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .guizepeizhi_warp {
    width: 100%;
    display: flex;
    .left_box {
      flex: 0 0 auto;
      background: linear-gradient(to top, #163d71, #185a85, #163d71);
      box-sizing: border-box;
      width: 250px;
      padding: 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      ::v-deep .seach_input {
        border-radius: 30px;
        flex: 0 0 auto;
        .el-input__icon {
          color: rgba(31, 133, 190, 1);
        }
        .el-input__inner {
          border-radius: 30px;
          border: 1px solid #185a85;
        }
      }
      .left_tree {
        flex: 1 1 auto;
      }
    }
    .right_box {
      margin-left: 20px;
      width: 0;
      flex: 1 1 auto;
      box-sizing: border-box;
      .right_main {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .top_btns_wrap {
          flex: 0 0 auto;
          width: 100%;
          height: 62px;
          background: linear-gradient(to bottom, #124181, #113c78);
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 20px;
          .btns_list {
            display: flex;
            align-items: center;
          }
        }
        .tabbar_wrap {
          flex: 0 0 auto;
          margin: 16px 0;
          width: 100%;
          height: 68px;
          border-bottom: 3px solid #216bad;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: #26527d;
            bottom: 8px;
            left: 0;
            right: 0;
          }
          .tabbar_list {
            display: flex;
            align-items: center;
            height: 100%;
            .tabbar_item {
              width: 220px;
              height: 100%;
              background: linear-gradient(to right, #173b6e, #184f7c, #173b6e);
              font-size: 18px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              color: #cbcbcb;
              margin-left: 6px;
              &:first-child {
                margin-left: 0;
              }
              &.act,
              &:hover {
                background: linear-gradient(to right, #21569e, #2378b6, #21569e);
                position: relative;
                z-index: 2;
              }
            }
          }
        }
        .right_content_wrap {
          flex: 1 1 auto;
          height: 0;
          .content_table {
            width: 100%;
            height: 100%;
            color: #fff;
          }
        }
      }
    }
  }
  </style>
  